<template>
    <div class="warp">

        <!-- 五大类 饼图 -->
        <div class="mrc1">
            <div class="chartContainer" v-for="(item,index) in details" :key="index">
                <h6 class="chartTitle">{{item.name}}（总计{{item.firstApproveCount}}人）</h6>
                <div class="chart" :class="'chart_'+item.id" style="min-width:400px;height:380px;"></div>
            </div>
        </div>

        <!-- 五大类占比 三个图表 -->
        <div class="mrc2">

            <!-- 占比折线图 -->
            <div class="chartContainer">
                <h6 class="chartTitle">五大类人员占比统计（总计{{categoryNum}}人）</h6>
                <div id="echarts-assessor" class="chart"></div>
            </div>
            
            <!-- 占比进度图 -->
            <div class="chartContainer">
                <h6 class="chartTitle">五大类人员职称占比统计（总计{{JobTitleNum}}人）</h6>
                <div id="echarts-assessor2" class="chart">
                    <div class="assessor-list" v-for="(item,i) in JobTitleName" :key="i">
                        <div class="assessor-list-title">
                            <p>{{item.scale}}<i>%</i></p>
                            <span><label >{{item.name}}</label>（{{item.num}}）</span>
                        </div>
                        <div class="assessor-list-bg">
                            <p :style="{background: item.color,width: item.scale+'%'}"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 拟参评人员占比 图表 -->
            <div class="chartContainer">
                <h6 class="chartTitle">人员统计</h6>
                <a class="operation" @click="$router.push({name:'personnelInfo'})">详情 》</a>
                <div id="recordsRateChart" class="chart"></div>
            </div>
            
        </div>

        <!-- 7小类人员占比柱状图 -->
        <div class="mrc3">
            <div class="chartContainer">
                <h6 class="chartTitle">17小类人员占比（总计{{ChildCategoryNum}}人）</h6>
                <div class="category-proportion">
                    <p>0</p>
                    <p>20%</p>
                    <p>40%</p>
                    <p>60%</p>
                    <p>80%</p>
                    <p>100%</p>
                </div>
                <div id="echarts-assessor3">
                    <div class="assessor-cont">
                        <div v-for="(item,i) in ChildCategoryName"
                            :style="{background: item.color,height: item.scale,boxShadow: '0px -4px 0px 4px '+shadowColor[i]}" :key="i">
                            <p>{{item.scale}}</p>
                            <span>
                                {{item.name}}<br/>
                                {{item.num}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {findListDetails, findListCategory, findListJobTitle, findListChildCategory,findListRecordsRate} from '@/service/api'

    export default {
        name: "Overview",
        data() {
            return {
                details: [], // 五大类详细数据

                // 17小类色值
                shadowColor:['rgba(56,193,207,0.3)','rgba(235,206,76,0.3)','rgba(26,67,169,0.3)', 'rgba(98,207,115,0.3)',
                            'rgba(96,96,245,0.3)','rgba(93,124,223,0.3)', 'rgba(56,193,207,0.3)','rgba(75,178,250,0.3)',
                            'rgba(26,67,169,0.3)', 'rgba(109,89,166,0.3)','rgba(96,128,245,0.3)','rgba(93,124,223,0.3)',
                            'rgba(122,79,231,0.3)','rgba(56,193,207,0.3)','rgba(110,107,255,0.3)','rgba(43,87,194,0.3)',
                            'rgba(98,65,192,0.3)'
                ],

                categoryScale: [],  // 五大类人员占比统计

                categoryData: [], // 柱状图数据
                JobTitleData: [],
                ChildCategoryData: [],

                categoryNum: 0,    // 柱状图总计
                JobTitleNum: 0,
                ChildCategoryNum: 0,

                categoryName: [],  // 柱状图
                JobTitleName: [],
                ChildCategoryName: [],
            }
        },
        created() {
            this.getFindListDetails();
            this.getFindListCategory();
            
            this.getFindListJobTitle();

             // 拟参评人员占比
            this.findRecordsRate();

            this.getFindListChildCategory();
        },
        methods: {
            // 1.0> 顶部饼图 - 五大类详情数据
            getFindListDetails() {

                var that = this;
                findListDetails().then(res => {
                    if (res.code == 200) {
                       
                        let data = [];
                        data.push(res.data[0]);
                        data.push(res.data[1]);
                        data.push(res.data[2]);
                        data.push(res.data[4]);
                        data.push(res.data[3]);
                       
                        this.details = data;

                        setTimeout(function(){
                            data.forEach((v) => {
                                var ele = document.querySelector(".chart_" + v.id);
                                var titleList = [];
                                for(var i=0;i<v.childList.length;i++){
                                    var newStr = '';
                                    // 每6个字符添加一个换行
                                    var charList = v.childList[i].name.split("");
                                    for(var cIndex=0;cIndex<charList.length;cIndex++){
                                        if(cIndex%6 == 0){
                                            newStr += '\n';
                                        }
                                        newStr += charList[cIndex];
                                    }
                                    titleList.push(newStr);
                                }
                                that.updateDetailsChart(ele,titleList,v.childList);
                            });
                        },100); 
                    }
                });
            },
            // 1.1> 顶部饼图 - 绘制
            updateDetailsChart(chartEle,titleList,childData){

                var that = this;

                // 获取所有职位
                var childTitle = [];
                if(childData.length > 0){
                    var count = childData[0].childList.length;
                    for(var dIndex=0;dIndex<childData[0].childList.length;dIndex++){
                        childTitle.push(childData[0].childList[dIndex].anotherName);
                    }
                }
                
                // 将所有相同职位整理到一个数组中，即所有正高一个数组、所有副高一个数组等...
                var seriesData = []; 
                for(var i=0;i<count;i++){
                    var data = [];
                    for(var cIndex=0;cIndex<childData.length;cIndex++){
                        data.push(childData[cIndex].childList[i]);
                    }
                    seriesData.push(data);
                }

                // 整理图表数据：图表数据是按圈为数组，即圈一个series元素
                var seriesData1 = [];
                for(i=0;i<seriesData.length;i++){

                    var data1 = [];
                    for(var eIndex=0;eIndex<seriesData[i].length;eIndex++){
                        if(seriesData[i][eIndex] == undefined){
                            data1.push(0);
                        }else{
                            data1.push(seriesData[i][eIndex].firstApproveCount);
                        }
                    }

                    // 一个数据对象代表一圈
                    seriesData1.push({
                        type: 'bar',
                        data:data1,
                        coordinateSystem: 'polar',
                        name:seriesData[i][0].anotherName,
                        stack:'a',
                        label:{
                            // width:'30px',
                            // color:'red',
                            // lineHeight:"10px",
                            // backgroundColor:'#333333',
                            // formatter:[
                            //     '{title|'+ seriesData[i][0].anotherName +'}',
                            // ].join('\n'),
                            // rich:{
                            //     title:{
                            //         color:'#fff',
                            //     }
                            // }
                        }
                    });
                }

                const myCharts = this.$echarts.init(chartEle);
                var option = {
                    color:['#37ecba','#72afd3','#6f86d6','#accbee'],
                    // color:['rgba(56,193,207,0.3)','rgba(235,206,76,0.3)','rgba(26,67,169,0.3)', 'rgba(98,207,115,0.3)'],
                    // 鼠标悬浮提示
                    tooltip: {},
                    angleAxis: {
                        triggerEvent:true,
                        type: 'category',
                        data: titleList,
                        axisLabel:{
                            fontSize:12,
                            color:"#333",
                            inside:true,
                            margin:2,
                            align:"right",
                        },
                        axisLine:{
                            lineStyle:{
                                color:"#9c9c9c"
                            }
                        }
                    },
                    radiusAxis: {
                        minInterval:1,
                    },
                    polar: {
                        center:['50%','50%'], // 图表位置
                        radius:'60%', // 半径
                    },
                    series:seriesData1,
                    legend: {
                        show: true,
                        bottom:'10px',
                        data: childTitle,
                        zIndex:100
                    }
                };
                myCharts.setOption(option);
                myCharts.on('click', function (params) {
                    // console.log(params.name);
                    that.$router.push({name: 'staffTitles', params: {"category": params.name.trim().replace(/\n|\r/g, ""), 'subCategory': params.seriesName}});
                });

                window.onresize = myCharts.resize;
            },
            // 1.2> 顶部饼图 - 跳转
            toStaffTitles(category, subCategory) {
                
            },

            // 2.0> 五大类人员占比统计 - 数据
            getFindListCategory() {
                findListCategory().then(res => {
                    if (res.code == 200) {

                        let data = [];
                        data.push(res.data[0]);
                        data.push(res.data[1]);
                        data.push(res.data[2]);
                        data.push(res.data[4]);
                        data.push(res.data[3]);


                        var xLabel = [];
                        var valueLabel = [];
                        var totalValue = 0;
                        data.forEach((v) => {
                            totalValue += Number(v.firstApproveCount);
                            xLabel.push(v.name + '\n' + v.firstApproveCount + '人');
                            
                        });
                        data.forEach((v) => {
                            valueLabel.push(v.firstApproveCount/totalValue * 100);
                        });
                        this.handleEchartsLine(xLabel,valueLabel,totalValue);
                    }
                });
            },
            // 2.1> 五大类人员占比统计 - 图表
            handleEchartsLine(xAxisData,valueList,totalValue) {
                this.categoryNum = totalValue;
                var myCharts = this.$echarts.init(document.getElementById('echarts-assessor'));
                var option = {
                    color:['#37ecba','#72afd3','#6f86d6','#accbee'],
                    tooltip:{
                        // formatter:"{b}：{c}人"
                        formatter:"{b}"
                    },
                    // 坐标区域
                    grid:{
                        top:'10%',
                        left:'50px',  // 图表与容器距离
                        right:'18px',
                        bottom:'14%',
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {  // Y轴刻度标签样式
                            show: true,  
                            interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                            color:'#999',        // 标签颜色
                        },
                        axisLine: {   // Y轴字体、线颜色
                            lineStyle: {
                                color: '#efefef'
                            }
                        }, 
                    },
                    yAxis: {
                        max:100,
                        min:0,
                        type: 'value',
                        axisLabel: {  // Y轴刻度标签样式
                            show: true,  
                            margin:8,
                            formatter: '{value}%',  // 标签格式
                            interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                            color:'#999',        // 标签颜色
                        },
                        axisLine: {   // Y轴字体、线颜色
                            lineStyle: {
                                color: '#efefef'
                            }
                        }, 
                        splitLine:{  // y轴网格区域分隔线样式
                            show:true,
                            lineStyle:{ // 样式
                                color:'#efefef',
                            }
                        }
                    },
                    series: [{
                        // name: '占比',
                        data:valueList,
                        itemStyle:{     // 柱子样式
                            // color:"#c23531",   // 每个柱子颜色
                            color:function(params){ 
                                var colorList = ['#38C1CF','#496BC3', '#596BA6', '#3896A1', '#5454B2'];
                                return colorList[params.dataIndex];
                            },
                        },
                        barWidth:'46%',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                // formatter: '{c}人',  // 标签格式
                                formatter(value){
                                    
                                    // var result = value.value / totalValue;
                                    // result = Math.round(result * 100) / 100;
                                    // return result + "%";

                                    return  Math.round(value.value * 100) / 100 + "%";
                                }
                            }
                        },
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myCharts.setOption(option);
                window.onresize = myCharts.resize;
            },

            // 3.0> 进度图 - 五大类人员职称占比统计数据
            getFindListJobTitle() {
                findListJobTitle().then(res => {
                    if (res.code == 200) {

                        let data = [];
                        data.push(res.data[1]);
                        data.push(res.data[2]);
                        data.push(res.data[0]);
                        data.push(res.data[3]);

                        data.forEach((v, i) => {
                              this.JobTitleNum += Number(v.firstApproveCount);
                              this.JobTitleName.push({
                                 name: v.name,
                                 num: v.firstApproveCount + '人',
                                 color: ['#FDD752', '#3399FF', '#4AD2FF'][i]
                              })
                              this.JobTitleData.push(v.firstApproveCount)
                        });
                        this.JobTitleName.forEach((v, i) => {
                              let percentage = this.JobTitleData[i] / this.JobTitleNum * 100;
                              this.JobTitleName[i].scale = parseInt(percentage)
                        });

                    } else {
                        console.log(res)
                    }
                });
            },

            // 4.0> 拟参评人员占比 - 数据
            findRecordsRate(){
                findListRecordsRate().then(res => {
                    if (res.code == 200) {
                        var xLabel = new Array();
                        var valueList = new Array();
                        // this.totalPeople = 0;
                        for(var i=0;i<res.data.length;i++){
                            xLabel.push(res.data[i].name);
                            valueList.push(res.data[i].count);
                            // this.totalPeople+=res.data.data[i].count;
                        }
                        this.findRecordsRateChart(xLabel,valueList);
                    }

                });
            },
            // 4.1> 拟参评人员占比 - 图表
            findRecordsRateChart(xLabel,valueList){
                var myCharts = this.$echarts.init(document.getElementById('recordsRateChart'));
                var option = {
                    tooltip:{
                        formatter:"{b}：{c}人"
                    },
                    // 坐标区域
                    grid:{
                        top:'10%',
                        left:'80px',  // 图表与容器距离
                        right:'52px',
                        bottom:'10%',
                    },
                    xAxis: {
                        type: 'category',
                        data: xLabel,
                        axisLabel: {  // Y轴刻度标签样式
                            show: true,  
                            interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                            color:'#999',        // 标签颜色
                        },
                        axisLine: {   // Y轴字体、线颜色
                            lineStyle: {
                                color: '#efefef'
                            }
                        }, 
                    },
                    yAxis: {
                        // max:100,
                        // min:0,
                        type: 'value',
                        axisLabel: {  // Y轴刻度标签样式
                            show: true,  
                            margin:20,
                            formatter: '{value}人',  // 标签格式
                            interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                            color:'#999',        // 标签颜色
                        },
                        axisLine: {   // Y轴字体、线颜色
                            lineStyle: {
                                color: '#efefef'
                            }
                        }, 
                        splitLine:{  // y轴网格区域分隔线样式
                            show:true,
                            lineStyle:{ // 样式
                                color:'#efefef',
                            }
                        }
                    },
                    series: [{
                        // name: '占比',
                        data:valueList,
                        itemStyle:{     // 柱子样式
                                
                            // color:"#c23531",   // 每个柱子颜色
                            color:function(params){ 
                                var colorList = ['#38C1CF','#496BC3', '#596BA6', '#3896A1', '#5454B2'];
                                return colorList[params.dataIndex];
                            },
                        },
                        barWidth:'26%',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: '{c}人',  // 标签格式
                            }
                        },
                    }]
                };

                var that = this;

                // 使用刚指定的配置项和数据显示图表。
                myCharts.setOption(option);
                myCharts.on('click', function(param) {
                    // console.log(param.dataIndex
                    // switch (param.dataIndex) {
                    //     case 0:{
                    //         that.$router.push({name:'personnelInfo'})
                    //         break;
                    //     }
                    //     case 1:{
                    //         that.$router.push({name:'participationManagement'})
                    //         break;
                    //     }
                    // }
                });

                window.onresize = myCharts.resize;
            },

            // 5.0> 17小类人员占比统计
            getFindListChildCategory() {
                findListChildCategory().then(res => {
                    if (res.code == 200) {

                        var colorList = ['#38C1CF', '#EBCE4C', '#1A43A9', '#62CF73', '#6060F5', '#5D7CDF', '#38C1CF', '#4BB2FA','#1A43A9', '#6D59A6', '#6080F5', '#5D7CDF', '#7A4FE7', '#38C1CF', '#6E6BFF', '#2B57C2', '#6241C0'];
                        res.data.forEach((v, i) => {
                            this.ChildCategoryNum += Number(v.firstApproveCount);
                            this.ChildCategoryName.push({
                                name: v.name,
                                num: v.firstApproveCount + '人',
                                color:colorList[i]
                            })
                            this.ChildCategoryData.push(v.firstApproveCount)
                        });
                        this.ChildCategoryName.forEach((v, i) => {
                            let percentage = this.ChildCategoryData[i] / this.ChildCategoryNum * 100;
                            this.ChildCategoryName[i].scale = parseInt(percentage) + '%'
                        });
                    }

                });
            },
           
        },
        mounted() {
            // this.handleEchartsLine()
            // this.eChartTotalProportion('total-proportion');
            // this.eChartTotalProportion('success-proportion');
        }
    }
</script>

<style scoped>
    .warp {
        height: 100%;
        background: #F4F1F4;
    }

    /* 0.0 图表容器，其中包含图表和图表Title */
    .chartContainer{
        height:100%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 18px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        margin:0px 10px;
    }

    /* 0.1 图表title */
    .chartContainer>h6.chartTitle {
        text-align: center;
        font-size: 16px;
        color: #333;
        position: absolute;
        top: 14px;
    }
    /* 0.2 操作 */
    .chartContainer>.operation{
        font-size: 15px;
        color: #31478F;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 14px;
    }


    /* 五大类 饼图 ----------------------------------------------------------------------------- */
    .mrc1 {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: space-between;
        padding-bottom: 6px;
    }
    .mrc1>.chartContainer{
        width: 33%;
        min-width:400px;
    }
    .mrc1>.chartContainer:first-child{
        margin-left: 0px;
    }
    .mrc1>.chartContainer:last-child{
        margin-right: 0px;
    }


    /* 五大类占比 三个图表 ------------------------------------------------------------------------ */
    .mrc2 {
        width: 100%;
        overflow: hidden;
        display: flex;
        margin-top: 18px;
    }
    .mrc2>.chartContainer{
        width: 33%;
    }
    .mrc2>.chartContainer:first-child{
        margin-left: 0px;
    }
    .mrc2>.chartContainer:last-child{
        margin-right: 0px;
    }
    .mrc2>.chartContainer>.chart{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 245px;
        position: relative;
        margin: 50px 0px 30px 0px;
    }
   

    /* 17小类人员占比 --------------------------------------------------------------------------------- */
    .mrc3 {
        height: 300px;
        background: #fff;
        border-radius: 5px;
        position: relative;
        margin-top: 18px;
        box-shadow: 0px 9px 18px 2px rgba(43, 103, 254, 0.1);
        margin-bottom: 18px;
        overflow: hidden;
    }
    .mrc3>.chartContainer{
        height: 227px;
    }
    #echarts-assessor3 {
        width: 95%;
        height: 165px;
        position: relative;
        margin: 60px auto 0;
        background: url("../../assets/Overview/17xiaolei.png") no-repeat;
        background-size: 100% 100%;
        background-position: 20px -5px;
    }

    #echarts-assessor3 .assessor-cont {
        width: 92%;
        height: 150px;
    }

    #echarts-assessor3 .assessor-cont {
        width: 96%;
    }

    #echarts-assessor3 .assessor-cont > div {
        margin-left: 25px;
    }

    .category-proportion{
        position: absolute;
        left: 16px;
        height: 205px;
        display: flex;
        flex-direction: column-reverse;
        text-align: right;
        color: #999;
        font-size: 10px;
        top: 33px;
    }
    .category-proportion p{
        margin-bottom: 14px;
    }
   
    .assessor-list{
        width: 82%;
        margin: 0 auto;
    }
    .assessor-list-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .assessor-list-title p{
        font-size: 24px;
        color: #333;
        font-weight: bold;
    }
    .assessor-list-title p i{
        font-size: 14px;
    }
    .assessor-list-title span{
        display: block;
        font-size: 13px;
    }
    .assessor-list-bg{
        height: 12px;
        background: #DDDDDD;
        border-radius:6px;
        position: relative;
    }
    .assessor-list-bg p{
        position: absolute;
        height: 12px;
        border-radius:6px;
        width: 60%;
        background: #3E99F9;
        transition: all 1s;
    }
    #echarts-assessor .assessor-cont,
    #echarts-assessor2 .assessor-cont {
        height: 145px;
    }

    #echarts-assessor .assessor-cont > div,
    #echarts-assessor2 .assessor-cont > div {
        margin-bottom: -26px;
    }

    .assessor-cont {
        width: 78%;
        height: 172px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0 auto;
    }

    .assessor-cont > div {
        width: 26px;
        height: calc(100% - 26px);
        background: #9D77FC;
        position: relative;
        top: 10px;
    }

    .assessor-cont > div p {
        position: absolute;
        top: -26px;
        width: 30px;
        height: 20px;
        line-height: 18px;
        background: url("../../assets/home/echart-title-bg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        color: #fff;
        font-size: 11px;
    }

    .assessor-cont > div span {
        display: block;
        position: absolute;
        top: 100%;
        /* width: 70px; */
        width: 260%;
        left: -22px;
        text-align: center;
        font-size: 11px;
        color: #999;
    }

    .margin-left {
        width: 55px;
        margin-left: 10px;
    }

</style>
